{#<!DOCTYPE html>#}
{#<html lang="en">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <title>Hello World</title>#}
{#    <style>#}
{#        body {#}
{#            background-image: url('https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/3343690165364c4d82f821ad4f7b973e~tplv-a9rns2rl98-image.image?rcl=20251113100506BED41BB597DC9C64B822&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765591545&x-signature=lU%2BjqoF%2FGBPX9xzxH9OemfTlwOQ%3D');#}
{#            background-size: cover;#}
{#            background-position: center;#}
{#            background-repeat: no-repeat;#}
{#            min-height: 100vh;#}
{#            margin: 0;#}
{#            padding: 20px;#}
{#            position: relative;#}
{#            overflow: hidden;#}
{#        }#}
{##}
{#        #meteorCanvas {#}
{#            position: absolute;#}
{#            top: 0;#}
{#            left: 0;#}
{#            width: 100%;#}
{#            height: 100%;#}
{#            z-index: 1;#}
{#            pointer-events: none;#}
{#        }#}
{##}
{#        h1, h2, h3, h4 {#}
{#            color: red;#}
{#            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);#}
{#            font-family: 'Arial', sans-serif;#}
{#            position: relative;#}
{#            z-index: 2;#}
{#        }#}
{##}
{#        img {#}
{#            border: 3px solid red;#}
{#            border-radius: 5px;#}
{#            box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);#}
{#            position: relative;#}
{#            z-index: 2;#}
{#        }#}
{#    </style>#}
{#</head>#}
{#<body>#}
{#<canvas id="meteorCanvas"></canvas>#}
{##}
{#<h1 style="color: red;">Die！！！！</h1>#}
{#<h2 style="color: red;">Die！！！</h2>#}
{#<h3 style="color: red;">Die！！</h3>#}
{#<h4 style="color: red;">Die！</h4>#}
{##}
{#<img src="https://b0.bdstatic.com/ugc/MsmkfgEOnx23H3nbhFTgXwb98c41e6ce39dc4f2210742c55aa3c87.jpg" alt="示例图片" width="300" height="550" title="死亡">#}
{##}
{#<script>#}
{#    // 血色流星动画#}
{#    const canvas = document.getElementById('meteorCanvas');#}
{#    const ctx = canvas.getContext('2d');#}
{##}
{#    // 设置canvas尺寸为窗口大小#}
{#    function resizeCanvas() {#}
{#        canvas.width = window.innerWidth;#}
{#        canvas.height = window.innerHeight;#}
{#    }#}
{##}
{#    resizeCanvas();#}
{#    window.addEventListener('resize', resizeCanvas);#}
{##}
{#    // 流星类#}
{#    class Meteor {#}
{#        constructor() {#}
{#            this.reset();#}
{#        }#}
{##}
{#        reset() {#}
{#            // 随机起始位置（屏幕上方）#}
{#            this.x = Math.random() * canvas.width;#}
{#            this.y = Math.random() * -canvas.height;#}
{##}
{#            // 随机大小#}
{#            this.size = Math.random() * 3 + 1;#}
{##}
{#            // 随机速度（x和y方向）#}
{#            this.speedX = Math.random() * 2 - 4; // 负数值使流星向左移动#}
{#            this.speedY = Math.random() * 5 + 5; // 正值使流星向下移动#}
{##}
{#            // 随机尾巴长度#}
{#            this.tailLength = Math.random() * 50 + 20;#}
{##}
{#            // 红色色调#}
{#            this.color = `rgba(${200 + Math.random() * 55}, ${Math.random() * 50}, ${Math.random() * 50}, ${0.5 + Math.random() * 0.5})`;#}
{#        }#}
{##}
{#        update() {#}
{#            // 更新位置#}
{#            this.x += this.speedX;#}
{#            this.y += this.speedY;#}
{##}
{#            // 如果流星超出屏幕，重置位置#}
{#            if (this.y > canvas.height || this.x < -100 || this.x > canvas.width + 100) {#}
{#                this.reset();#}
{#            }#}
{#        }#}
{##}
{#        draw() {#}
{#            ctx.beginPath();#}
{#            ctx.moveTo(this.x, this.y);#}
{##}
{#            // 绘制流星尾巴#}
{#            const tailX = this.x - this.speedX * this.tailLength;#}
{#            const tailY = this.y - this.speedY * this.tailLength;#}
{##}
{#            ctx.lineTo(tailX, tailY);#}
{#            ctx.strokeStyle = this.color;#}
{#            ctx.lineWidth = this.size;#}
{#            ctx.stroke();#}
{##}
{#            // 绘制流星头部#}
{#            ctx.beginPath();#}
{#            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);#}
{#            ctx.fillStyle = this.color;#}
{#            ctx.fill();#}
{#        }#}
{#    }#}
{##}
{#    // 创建流星数组#}
{#    const meteors = [];#}
{#    const meteorCount = 20; // 流星数量#}
{##}
{#    for (let i = 0; i < meteorCount; i++) {#}
{#        meteors.push(new Meteor());#}
{#    }#}
{##}
{#    // 动画控制变量#}
{#    let animationId = null;#}
{#    const PLAY_DURATION = 2000; // 播放时长（毫秒）#}
{#    const PAUSE_DURATION = 5000; // 暂停时长（毫秒）s#}
{##}
{#    // 动画循环#}
{#    function animate() {#}
{#        // 清除画布（使用半透明黑色，创建拖影效果）#}
{#        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';#}
{#        ctx.fillRect(0, 0, canvas.width, canvas.height);#}
{##}
{#        // 更新和绘制所有流星#}
{#        for (const meteor of meteors) {#}
{#            meteor.update();#}
{#            meteor.draw();#}
{#        }#}
{##}
{#        animationId = requestAnimationFrame(animate);#}
{#    }#}
{##}
{#    // 播放动画#}
{#    function playAnimation() {#}
{#        // 重置所有流星位置#}
{#        for (const meteor of meteors) {#}
{#            meteor.reset();#}
{#        }#}
{##}
{#        // 开始动画#}
{#        animate();#}
{##}
{#        // 设定播放时长后暂停#}
{#        setTimeout(() => {#}
{#            stopAnimation();#}
{##}
{#            // 设定暂停时长后再次播放#}
{#            setTimeout(playAnimation, PAUSE_DURATION);#}
{#        }, PLAY_DURATION);#}
{#    }#}
{##}
{#    // 停止动画#}
{#    function stopAnimation() {#}
{#        if (animationId) {#}
{#            cancelAnimationFrame(animationId);#}
{#            animationId = null;#}
{##}
{#            // 清除画布#}
{#            ctx.clearRect(0, 0, canvas.width, canvas.height);#}
{#        }#}
{#    }#}
{##}
{#    // 开始动画循环#}
{#    playAnimation();#}
{#</script>#}
{#</body>#}
{#</html>#}
{% extends 'base.html' %}

{% block content %}
    <div class="p-4">
        <!-- 数据统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-3 mb-3">
                <div class="stat-card bg-primary text-white p-4 rounded-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="mb-1">总用户</p>
                            <h3 class="mb-0">2,541</h3>
                        </div>
                        <i class="fa fa-users fa-2x"></i>
                    </div>
                    <div class="mt-2 text-sm">
                        <span class="text-success"><i class="fa fa-arrow-up"></i> 5.2%</span> 较上月
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="stat-card bg-success text-white p-4 rounded-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="mb-1">总订单</p>
                            <h3 class="mb-0">1,892</h3>
                        </div>
                        <i class="fa fa-file-text-o fa-2x"></i>
                    </div>
                    <div class="mt-2 text-sm">
                        <span class="text-white"><i class="fa fa-arrow-up"></i> 12.8%</span> 较上月
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="stat-card bg-warning text-white p-4 rounded-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="mb-1">总收入</p>
                            <h3 class="mb-0">¥35,621</h3>
                        </div>
                        <i class="fa fa-money fa-2x"></i>
                    </div>
                    <div class="mt-2 text-sm">
                        <span class="text-white"><i class="fa fa-arrow-up"></i> 8.5%</span> 较上月
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="stat-card bg-info text-white p-4 rounded-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="mb-1">转化率</p>
                            <h3 class="mb-0">12.5%</h3>
                        </div>
                        <i class="fa fa-exchange fa-2x"></i>
                    </div>
                    <div class="mt-2 text-sm">
                        <span class="text-danger"><i class="fa fa-arrow-down"></i> 1.2%</span> 较上月
                    </div>
                </div>
            </div>
        </div>

        <!-- 上传区域和表格 -->
        <div class="row">
            <!-- 左侧上传区域 -->
            <div class="col-md-4 mb-4">
                <div class="card p-4 h-100">
                    <h5 class="card-title mb-4">文件上传</h5>

                    <!-- 单文件上传 -->
                    <div class="mb-4">
                        <label class="form-label">上传用户头像</label>
                        <div class="upload-btn-wrapper">
                            <button class="btn btn-outline-primary w-100">
                                <i class="fa fa-upload me-2"></i>选择图片
                            </button>
                            <input type="file" accept="image/*" id="avatarUpload"/>
                        </div>
                        <div class="mt-3" id="avatarPreview" style="display: none;">
                            <img src="" alt="预览图" class="img-thumbnail" width="100%">
                        </div>
                    </div>

                    <!-- 多文件上传 -->
                    <div class="mb-4">
                        <label class="form-label">批量上传产品图片</label>
                        <div class="upload-btn-wrapper">
                            <button class="btn btn-outline-secondary w-100">
                                <i class="fa fa-files-o me-2"></i>选择多个文件
                            </button>
                            <input type="file" accept="image/*" multiple id="productUpload"/>
                        </div>
                        <div class="mt-3" id="fileList"></div>
                    </div>

                    <!-- 上传按钮 -->
                    <button class="btn btn-success w-100" id="submitUpload">
                        <i class="fa fa-check me-2"></i>确认上传
                    </button>
                </div>
            </div>

            <!-- 右侧数据表格 -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">最近订单</h5>
                        <button class="btn btn-sm btn-outline-primary">
                            <i class="fa fa-download me-1"></i>导出数据
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>订单编号</th>
                                    <th>用户</th>
                                    <th>金额</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>ORD-2023-001</td>
                                    <td>张三</td>
                                    <td>¥299.00</td>
                                    <td><span class="badge bg-success">已完成</span></td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>ORD-2023-002</td>
                                    <td>李四</td>
                                    <td>¥599.00</td>
                                    <td><span class="badge bg-warning">处理中</span></td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>ORD-2023-003</td>
                                    <td>王五</td>
                                    <td>¥1299.00</td>
                                    <td><span class="badge bg-danger">已取消</span></td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>ORD-2023-004</td>
                                    <td>赵六</td>
                                    <td>¥89.00</td>
                                    <td><span class="badge bg-primary">已付款</span></td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页 -->
                        <nav class="mt-3">
                            <ul class="pagination justify-content-center">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1">上一页</a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}